<template>
  <div>
    <!-- 列表 -->
    <basic-layout title="出行报备" @handleAdd="handleAdd">
      <div class="columnFlex">
        <!-- 查询条件 -->
        <van-row class="search-row">
          <van-search
            v-model="formData.keyword"
            maxlength="20"
            show-action
            label=""
            placeholder="姓名"
            @search="onRefresh"
          >
            <template #action>
              <div @click="onRefresh">搜索</div>
            </template>
          </van-search>
          <div class="filter-icon">
            <van-icon
              name="filter-o"
              @click="$refs.queryPopupRef.show = true"
            />
          </div>
        </van-row>
        <van-row class="listCon">
          <van-pull-refresh
            class="pullRefresh"
            v-model="refreshLoading"
            @refresh="onRefresh"
          >
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="listData.length ? '没有更多了' : ''"
              @load="onLoad"
            >
              <van-swipe-cell v-for="val in listData" :key="val.tripReportId">
                <div class="cellContent" @click="handleDetail(val)">
                  <div class="top">
                    <div class="flexTit">
                      <div class="title">
                        <span>{{ val.reportor }}</span>
                        <van-tag
                          class="vanTagStyle"
                          color="rgb(242, 168, 78)"
                          v-if="val.isSelfFlag === '1'"
                        >
                          <span>代</span>
                        </van-tag>
                      </div>

                      <div class="appStatusType">
                        <span
                          v-if="val.appStatus == '1'"
                          style="
                            font-weight: 400;
                            line-height: 45px;-8px
                          "
                          >{{ val.appStatusLabel }}
                        </span>
                        <span
                          v-if="val.appStatus == '2'"
                          style="
                            color: #0000ff;
                            font-weight: 400;
                            line-height: 45px;
                          "
                          >{{ val.appStatusLabel }}
                        </span>
                        <span
                          v-if="val.appStatus == '3' || val.appStatus == '7'"
                          style="
                            color: rgb(0 194 8 / 50%);
                            font-weight: 400;
                            line-height: 45px;
                          "
                          >{{ val.appStatusLabel }}
                        </span>
                        <span
                          v-if="val.appStatus == '4' || val.appStatus == '5'"
                          style="
                            color: #ff0000;
                            font-weight: 400;
                            line-height: 45px;
                          "
                          >{{ val.appStatusLabel }}
                        </span>
                        <span
                          v-if="val.appStatus == '6'"
                          style="
                            color: #ffd700;
                            font-weight: 400;
                            line-height: 45px;
                          "
                          >{{ val.appStatusLabel }}
                        </span>
                      </div>
                    </div>

                    <div class="second">
                      {{ val.empNatureLabel }}
                      <span style="padding: 5px"> {{ val.tripTypeLabel }}</span>
                    </div>
                  </div>
                  <div class="bottom">
                    <p>
                      <span class="label">申请编号：</span>
                      {{ val.appNo == "0" ? " " : val.appNo || "/" }}
                    </p>
                    <p>
                      <span class="label">是否省外：</span>
                      {{ val.isOutProvinceLabel || "/" }}
                    </p>
                    <p>
                      <span class="label">出行地区：</span>
                      {{ val.provName + val.cityName + val.areaName || "/" }}
                    </p>
                    <p>
                      <span class="label">出行详细地址：</span>
                      {{ val.addr || "/" }}
                    </p>
                    <p>
                      <span class="label">往返时间：</span>
                      {{ val.leaveDate }} ~ {{ val.returnDate }}
                    </p>
                  </div>

                  <div class="btn" v-if="val.appStatus === '6'">
                    <van-button
                      color="rgb(217, 165, 83)"
                      plain
                      size="mini"
                      @click.stop.prevent="handleCancel(val)"
                      >取消</van-button
                    >
                  </div>
                </div>
              </van-swipe-cell>
            </van-list>
            <!-- 是否代填报选择 -->
            <van-action-sheet
              v-model="showIsSelfPicker"
              cancel-text="取消"
              :actions="isSelfFlagList"
              @select="onIsSelfConfirm"
            />
            <!-- 申请状态选择 -->
            <van-action-sheet
              v-model="showAppStatusPicker"
              cancel-text="取消"
              :actions="appStatusList"
              @select="onAppStatusConfirm"
            />
            <van-empty
              v-if="!loading && !listData.length"
              class="custom-image"
              :image="require('../../../../assets/images/empty.png')"
              description="暂无数据"
            />
          </van-pull-refresh>
        </van-row>
      </div>
    </basic-layout>
    <!-- 筛选条件弹出框 -->
    <queryPopup
      ref="queryPopupRef"
      @handleSearch="onRefresh"
      @handleReset="handleReset"
    >
      <van-form class="filterBox">
        <label>是否代填报</label>
        <van-field>
          <template #input>
            <div class="textCon" @click="showIsSelfPicker = true">
              <span v-if="!isSelfFlagLebal" style="color: #aaa"
                >请选择是否代填报</span
              >
              <span v-else>{{ isSelfFlagLebal }}</span>
            </div>
          </template>
        </van-field>
        <label>申请状态</label>
        <van-field>
          <template #input>
            <div class="textCon" @click="showAppStatusPicker = true">
              <span v-if="!appStatusLebal" style="color: #aaa"
                >请选择申请状态</span
              >
              <span v-else>{{ appStatusLebal }}</span>
            </div>
          </template>
        </van-field>
        <label>出发时间</label>
        <van-field
          readonly
          clickable
          :value="leaveDateInterval"
          @click="leaveDateShow = true"
          placeholder="点击选择返回时间"
        />
        <label>返回时间</label>
        <van-field
          readonly
          clickable
          :value="returnDateInterval"
          @click="returnDateShow = true"
          placeholder="点击选择返回时间"
        />
      </van-form>
    </queryPopup>
    <van-calendar
      v-model="leaveDateShow"
      :min-date="minDate"
      :max-date="maxDate"
      :allow-same-day="true"
      :show-confirm="false"
      type="range"
      @confirm="onLeaveDateConfirm"
    />
    <van-calendar
      v-model="returnDateShow"
      :min-date="minDate"
      :max-date="maxDate"
      :allow-same-day="true"
      :show-confirm="false"
      type="range"
      @confirm="onReturnDateConfirm"
    />
    <!-- 新增/详情/编辑 弹出框 -->
    <fullscreenModal
      :modal="fullscreenModal"
      :isAdd="isAdd"
      label="出行报备"
      :isShowEdit="currentParam.appStatus == '1'"
      :showSubmit="currentParam.appStatus == '1' && editType == 'detail'"
      :showSave="false"
      :editType="editType"
      @handleClose="fullscreenModal = false"
      @handleCancel="editType = 'detail'"
      @handleEdit="handleUpdate"
      @handleOnlySubmit="handleSubmit()"
      @handleSave="$refs.editFormRef.handleSave()"
    >
      <detail v-show="editType == 'detail'" ref="detailRef"></detail>
      <edit-form
        v-show="editType == 'edit'"
        @close="fullscreenModal = false"
        @refresh="onRefresh"
        ref="editFormRef"
      />
    </fullscreenModal>
    <full-loading v-if="loading"></full-loading>
  </div>
</template>

<script>
import { queryDic } from "@/api/common";
import {
  getPageForTravel,
  queryTravelDetail,
  deleteTravel,
  travelApplySubmit,
  cancelTravelApply,
} from "@/api/srvAssurance/epidprevention/travel/travel";
import editForm from "./editForm.vue";
import detail from "./detail.vue";
export default {
  components: { editForm, detail },
  data() {
    return {
      formData: {
        isSelfFlag: "",
        leaveDateBegin: "",
        leaveDateEnd: "",
        returnDateBegin: "",
        returnDateEnd: "",
        keyword: "",
        pageNum: 1,
        pageSize: 20,
      },
      showIsSelfPicker: false, //是否代填报picker
      showAppStatusPicker: false, //申请状态picker
      loading: false,
      finished: false,
      refreshLoading: false,
      fullscreenModal: false,
      leaveDateShow: false, //出发时间show
      returnDateShow: false, //返回时间show
      leaveDateInterval: "", //出发时间区间
      returnDateInterval: "", //返回时间区间
      isSelfFlagList: [], // 是否代填报dic
      appStatusList: [], // 申请状态dic
      isSelfFlagLebal: "", //是否代填报搜索框
      appStatusLebal: "", //申请状态搜索框
      minDate: new Date(new Date().getFullYear() - 1, 0, 1),
      maxDate: new Date(new Date().getFullYear(), 11, 31),
      totalPage: 0, //总页数
      isAdd: false,
      editType: "",
      listData: [], // 列表数据
      currentParam: {}, // 保存当前查看详情的row数据
    };
  },
  created() {
    if (sessionStorage.getItem("prjData")) {
      var prjData = JSON.parse(sessionStorage.getItem("prjData"));
      this.projectId = prjData.projectId || "";
    }
  },
  mounted() {
    this.getSearch();
    this.queryDicData();
  },
  methods: {
    // 获取表格数据
    getSearch() {
      this.loading = true;
      getPageForTravel(this.formData)
        .then((res) => {
          this.loading = false;
          this.refreshLoading = false;
          if (res.code === 1000 && res.data) {
            this.listData = [...this.listData, ...res.data.records];
            if (this.listData.length >= res.data.total) {
              this.finished = true;
            }
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
        });
    },
    onRefresh() {
      this.refreshLoading = false;
      this.finished = false;
      this.listData = [];
      this.formData.pageNum = 1;
      this.getSearch();
    },
    onLoad() {
      this.formData.pageNum++;
      this.getSearch();
    },
    // 重置
    handleReset() {
      this.formData = {
        isSelfFlag: "",
        leaveDateBegin: "",
        leaveDateEnd: "",
        returnDateBegin: "",
        returnDateEnd: "",
        keyword: "",
        pageNum: 1,
        pageSize: 20,
      };
      this.leaveDateInterval = "";
      this.returnDateInterval = "";
      this.isSelfFlagLebal = "";
      this.appStatusLebal = "";
      this.onRefresh();
    },
    // 新建数据
    handleAdd() {
      this.fullscreenModal = true;
      this.editType = "edit";
      this.isAdd = true;
      this.$refs.editFormRef.resetForm();
      //   this.$refs.editFormRef.setPrjData(this.projectId, this.projectInfo);
      this.currentParam = {};
    },
    // 查看详情
    async handleDetail(param) {
      this.fullscreenModal = true;
      this.editType = "detail";
      this.isAdd = false;
      var detailInfo = [];
      let item = param;
      this.currentParam = param;
      this.$refs.detailRef.getData(detailInfo);
      this.loading = true;
      let res = await queryTravelDetail(`?tripReportId=${param.tripReportId}`);
      if (res.status == "1000" && res.data) {
        item = res.data;
        this.currentParam = res.data;
      }
      this.loading = false;
      // this.setDetailInfo(item);
      this.$refs.detailRef.getData(item);
      detailInfo = [
        {
          title: "是否代他人填报",
          prop: "isSelfFlagLabel",
          value: item.isSelfFlagLabel,
        },
        {
          title: "姓名",
          prop: "reportor",
          value: item.reportor,
        },
        {
          title: "员工性质",
          prop: "empNatureLabel",
          value: item.empNatureLabel,
        },
        {
          title: "联系方式",
          prop: "tel",
          value: item.tel,
        },
        {
          title: "出行类型",
          prop: "tripTypeLabel",
          value: item.tripTypeLabel,
        },
        {
          title: "出行区域",
          prop: "provName",
          value: item.provName + item.cityName + item.areaName,
        },
        {
          title: "出行方式",
          prop: "tripMethodLabel",
          value: item.tripMethodLabel,
        },
        {
          title: "是否省外",
          prop: "isOutProvinceLabel",
          value: item.isOutProvinceLabel,
        },
        {
          title: "出行详细地址",
          prop: "addr",
          value: item.addr,
        },
        {
          title: "往返日期",
          prop: "leaveDate",
          value: item.leaveDate + "~" + item.returnDate,
        },
        {
          title: "出行原因",
          prop: "tripReason",
          value: item.tripReason,
        },
      ];
      // this.$refs.detailRef.getData(detailInfo);
    },
    //提交
    handleSubmit() {
      if (this.currentParam.appStatus != "1") {
        this.$Notify({
          type: "warning",
          message: "该数据已提交在流程中，无法重复提交！",
        });
        return;
      }
      this.$Dialog
        .confirm({
          title: "是否确定提交,提交后数据将不可修改？",
        })
        .then(async () => {
          var res = await travelApplySubmit([this.currentParam.tripReportId]);
          if (res.code === 1000) {
            this.$Notify({ type: "success", message: "提交审核成功！" });
            this.onRefresh();
            this.fullscreenModal = false;
          }
        })
        .catch(() => {});
    },
    // 编辑数据
    handleUpdate() {
      this.editType = "edit";
      this.$refs.editFormRef.resetForm();
      this.$refs.editFormRef.getData(this.currentParam);
    },
    // 是否代填报选择
    onIsSelfConfirm(item) {
      this.formData.isSelfFlag = item.codeValue;
      this.isSelfFlagLebal = item.valueAlias;
      this.showIsSelfPicker = false;
      this.onRefresh();
    },
    // 申请状态选择
    onAppStatusConfirm(item) {
      this.formData.appStatus = item.codeValue;
      this.appStatusLebal = item.valueAlias;
      this.showAppStatusPicker = false;
      this.onRefresh();
    },
    // 下拉框数据
    queryDicData() {
      // 是否代填报
      queryDic("IS_FLAG_CODE").then((res) => {
        if (res.code === 1000 && res.data) {
          this.isSelfFlagList = res.data;
        }
      });
      // 申请状态
      queryDic("PS_ALY_ADT_STATUS_CODE").then((res) => {
        if (res.code == "1000") {
          this.appStatusList = res.data;
        }
      });
    },
    //日期格式
    formatDate(date) {
      return `${date.getFullYear()}-${
        date.getMonth() < 9
          ? "0" + (date.getMonth() + 1)
          : "" + (date.getMonth() + 1)
      }-${date.getDate() < 10 ? "0" + date.getDate() : "" + date.getDate()}`;
    },
    // 出发时间选择
    onLeaveDateConfirm(date) {
      this.formData.leaveDateBegin = this.formatDate(date[0]);
      this.formData.leaveDateEnd = this.formatDate(date[1]);
      this.leaveDateInterval = `${this.formatDate(date[0])} / ${this.formatDate(
        date[1]
      )}`;
      this.leaveDateShow = false;
    },
    // 返回时间选择
    onReturnDateConfirm(date) {
      this.formData.returnDateBegin = this.formatDate(date[0]);
      this.formData.returnDateEnd = this.formatDate(date[1]);
      this.returnDateInterval = `${this.formatDate(
        date[0]
      )} / ${this.formatDate(date[1])}`;
      this.returnDateShow = false;
    },
    // 删除
    handleDelete(val) {
      if (val.appStatus != "1") {
        this.$Notify({
          type: "warning",
          message: "该数据已提交在流程中，无法删除！",
        });
        return;
      }
      this.$Dialog
        .confirm({
          title: "是否确定删除该数据？",
        })
        .then(async () => {
          var res = await deleteTravel([val.tripReportId]);
          if (res.code === 1000) {
            this.$Notify({ type: "success", message: "删除成功！" });
            this.onRefresh();
          }
        })
        .catch(() => {});
    },
    //取消
    handleCancel(param) {
      if ("6" != param.appStatus) {
        this.$Notify({
          type: "warning",
          message: "只能操作驳回状态的数据！",
        });
        return;
      }
      let requestData = {
        instanceId: param.appNo,
      };
      this.$Dialog
        .confirm({
          title: "是否取消？",
        })
        .then(() => {
          cancelTravelApply(requestData).then((res) => {
            if (res.code === 1000) {
              this.$Notify({ type: "success", message: "取消成功！" });
              this.onRefresh();
            }
          });
        });
    },
  },
};
</script>

<style scoped lang="less">
.listCon {
  .cellContent {
    .top {
      padding: 0 10px;
      box-sizing: border-box;
      .flexTit {
        .vanTagStyle {
          margin: 0px 10px;
          // padding: 0px 0px 3px 0px;
        }
        .appStatusType {
          margin: 0px 5px 0px 0px;
          height: 30px;
        }
      }
      .second {
        color: #999;
        margin: -6px 0px -2px 0px;
        padding: 0px;
      }
    }
    .bottom {
      margin-top: 3px;
      padding: 3px 10px 0;
      border-top: 1px solid #eee;
      position: relative;
    }
    .btn {
      width: 20%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      position: absolute;
      bottom: 5px;
      right: 10px;

      .van-button {
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        border-radius: 17px;
        font-size: 13px;
      }
    }
  }

  .rightButton {
    display: flex;
    flex-direction: column;
    height: 100%;
    button {
      flex: 1;
      height: 50%;
    }
  }
}
</style>
